<template>
	<view class="page-container">
		<view class="container">
			<view class="header" :style="topBarStyle">
				<view class="header-icon" @click="onBack()">
					<u-icon name="arrow-left" color="#000" size="20"></u-icon>
				</view>
				<view class="container-information-right">
					<text class="releaseIconfont icon-fabu-xuzhi info-circle-icon"></text>
				</view>
			</view>

			<view class="title-h2"> 本地身份认证 </view>
			<view class="title-h3"> 满足以下条件，即可成功认证为本地人 </view>

			<view class="content">
				<view class="content-li" :class="{ completed: personInformationBtnText == '去修改' }"
					@click="handleToDetail()">
					<view class="content-li-top">
						<view class="content-li-left"> 完成个人信息认证 </view>
						<view class="content-li-right">
							<view class="" :class="personInformationBtnText == '未通过' ? 'isNotPass' : ''">
								{{ personInformationBtnText }}
							</view>
							<view class="content-li-right-icon">
								<u-icon name="arrow-right" :color="
                    isPersonalInfoCompleted
                      ? 'rgba(255, 255, 255, 1)'
                      : 'rgba(0, 0, 0, 1)'
                  " size="10"></u-icon>
							</view>
						</view>
					</view>

					<view class="content-li-bottom" v-if="personInformationBtnText == '已驳回'">
						驳回原因：{{ userInfo.remark }}
					</view>
				</view>

				<view class="content-li" :class="{ completed: isPostCompleted }" @click="handleToFabu()"
					v-show="!isPostCompleted">
					<view class="content-li-top">
						<view class="content-li-left"> 发布1条有效本地帖 </view>
						<view class="content-li-right">
							<view class="">
								{{ isPostCompleted ? "已完成" : "去完成" }}
							</view>
							<view class="content-li-right-icon">
								<u-icon name="arrow-right" :color="
                    isPostCompleted
                      ? 'rgba(255, 255, 255, 1)'
                      : 'rgba(0, 0, 0, 1)'
                  " size="10"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="footer">
				<!-- 协议勾选 -->
				<view class="agreement">
					<label class="checkbox-wrapper" @click="toggleCheckbox">
						<view class="custom-checkbox" :class="{ checked: selected }">
							<u-icon v-if="selected" name="checkmark" color="#fff" size="12"></u-icon>
						</view>
						<text>我已知晓并同意
							<text class="protocol" @click.stop="onProtocol">《本地人服务协议》</text>和
							<text class="protocol" @click.stop="onProtocol">《免责协议》</text>
						</text>
					</label>
				</view>
			</view>

			<view class="footer-btn-wrapper" @click="handleEmit()">
				<view class="footer-btn"> 申请本地人 </view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPersonByUserId,
		updateUserByUserId
	} from "@/request/api.js";
	export default {
		data() {
			return {
				// 添加状态控制变量
				isPersonalInfoCompleted: false, // 个人信息认证是否完成
				isPostCompleted: false, // 发布帖子是否完成
				selected: false,
				personInformationBtnText: "去认证",
				userInfo: {},
			};
		},
		// 添加计算属性
		computed: {
			topBarStyle() {
				// #ifdef MP-WEIXIN
				if (this.$store.state.systemInfo.capsuleInfo.width > 0) {
					const paddingRight =
						this.$store.state.systemInfo.capsuleInfo.width +
						this.$store.state.systemInfo.capsuleRightPadding * 2;
					const paddingTop =
						this.$store.state.systemInfo.statusBarHeight +
						this.$store.state.systemInfo.capsuleRightPadding;

					return `padding:${paddingTop}px ${paddingRight}px 10rpx 30rpx;`;
				}
				// #endif
				// #ifdef APP-PLUS || H5
				return `padding-top: ${uni.getSystemInfoSync().statusBarHeight}px;`;
				// #endif
				return "";
			},
		},
		onShow() {
			this.getPersonStatus();
		},

		methods: {
			// 申请本地人提交
			handleEmit() {
				if (!this.selected) {
					uni.showToast({
						title: "请阅读并同意《本地人服务协议》和《免责协议》",
						icon: "none",
					});
					return;
				} else if (!this.isPersonalInfoCompleted) {
					uni.showToast({
						title: "个人信息认证未完成",
						icon: "none",
					});
					return;
				} else if (!this.isPostCompleted) {
					uni.showToast({
						title: "发布一条有效帖未完成",
						icon: "none",
					});
					return;
				}

				let params = {
					userId: this.$store.state.userInfo.userId,
				};
				updateUserByUserId(params).then((res) => {
					if (res.data.code == 200) {
						uni.showToast({
							title: "认证成功",
							icon: "none",
						});
						uni.navigateBack();
					} else {
						uni.showToast({
							title: "网络异常",
							icon: "none",
						});
					}
				});
			},
			// 获取身份认证状态
			getPersonStatus() {
				let params = {
					userId: this.$store.state.userInfo.userId,
				};
				getPersonByUserId(params)
					.then((res) => {
						// 使用switch语句替代多个if-else，提高可读性
						switch (res.data.code) {
							case 200:
								// 处理成功响应
								// 完成个人信息认证
								this.handleAuthStatus(
									res.data.ClientUserPerson?.starts,
									res.data.ClientUserPerson,
									res.data.clientPostList
								);
								// 发布一条有效帖
								break;
							default:
								// 其他情况默认为未认证
								this.personInformationBtnText = "去认证";
								this.isPersonalInfoCompleted = false;
								break;
						}
					})
					.catch((error) => {
						console.error("获取认证状态失败:", error);
						// 请求失败时的默认状态
						this.personInformationBtnText = "去认证";
						this.isPersonalInfoCompleted = false;
					});
			},

			// 处理认证状态
			handleAuthStatus(status, data, clientPostList) {
				// 使用对象映射替代多个if-else，提高可读性和可维护性
				const statusMap = {
					0: {
						text: "待提交",
						completed: false,
					}, // 已通过
					1: {
						text: "去修改",
						completed: true,
					}, // 未通过
					2: {
						text: "已驳回",
						completed: false,
					}, // 待审核
					3: {
						text: "待审核",
						completed: false,
					}, // 待审核
				};

				const statusInfo = statusMap[status] || {
					text: "去认证",
					completed: false,
				};
				this.personInformationBtnText = statusInfo.text;
				this.isPersonalInfoCompleted = statusInfo.completed;
				this.userInfo = data;
				if (clientPostList && clientPostList.length > 0) {
					this.isPostCompleted = true;
				}
			},
			onBack() {
				uni.navigateBack();
			},
			// 切换复选框状态
			toggleCheckbox() {
				this.selected = !this.selected;
			},

			handleToDetail() {
				const userInfoParam = encodeURIComponent(JSON.stringify(this.userInfo));
				uni.navigateTo({
					url: `/pages_sub/authentication/Personal/detail?userInfo=${userInfoParam}`,
				});
				// 需要判断当前页面的两个任务是否完成。
				// if (!this.selected) {
				// 	uni.showToast({
				// 		title: '请阅读并同意本地人服务协议和免责协议',
				// 		icon: 'none'
				// 	})
				// } else {
				// 	uni.navigateTo({
				// 		url: '/pages_sub/authentication/Personal/detail'
				// 	})
				// }
			},
			handleToFabu() {


				if (!this.isPostCompleted) {
					uni.navigateTo({
						url: `/pages_sub/release/release/release?from=${"local"}&back=true`,
					});
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.page-container {
		background: linear-gradient(to bottom,
				rgba(255, 215, 169, 1),
				rgba(255, 255, 255, 1),
				rgba(239, 253, 255, 1));
		height: 100vh;

		.container {
			width: 100%;

			.header {
				padding: 0 30rpx;
				height: 60rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				text-align: center;

				.header-icon {
					// 左侧图标
				}

				.container-information-right {
					// 右侧占位元素，保持布局平衡
					width: 44rpx; // 与左侧图标宽度相近
					height: 44rpx;

					.info-circle-icon {
						font-size: 40rpx;
						color: #333;
					}
				}
			}

			.title-h2 {
				color: rgba(0, 0, 0, 1);
				font-size: 50rpx;
				line-height: 50rpx;
				font-weight: 400;
				text-align: center;
				margin-top: 68rpx;
			}

			.title-h3 {
				color: rgba(77, 77, 86, 1);
				font-size: 26rpx;
				line-height: 30rpx;
				font-weight: 400;
				text-align: center;
				margin-top: 40rpx;
			}

			.content {
				margin-top: 130rpx;

				.content-li {
					background-color: rgba(255, 255, 255, 1);
					padding: 34rpx 20rpx;
					border-radius: 20rpx;
					margin: 0 60rpx;

					margin-bottom: 30rpx;

					.content-li-top {
						display: flex;
						justify-content: space-between;

						.content-li-left {
							color: rgba(0, 0, 0, 1);
							font-weight: bold;
							font-size: 30rpx;
							line-height: 30rpx;
						}

						.content-li-right {
							display: flex;
							color: rgba(0, 0, 0, 1);
							font-weight: 500;
							font-size: 26rpx;
							line-height: 30rpx;
							align-items: center;
							/* 垂直居中 */

							.content-li-right-icon {
								margin-left: 10rpx;
							}

							.isNotPass {
								color: red;
							}
						}
					}

					.content-li-bottom {
						color: red;
						font-size: 30rpx;
						line-height: 30rpx;
						margin-top: 20rpx;
					}

					/* 完成状态样式 */
					&.completed {
						background-color: rgba(255, 179, 39, 1);
						box-shadow: 0 4rpx 12rpx rgba(153, 153, 153, 0.2);

						.content-li-left,
						.content-li-right,
						.content-li-right view {
							color: #ffffff;
						}
					}
				}
			}

			.footer {
				width: calc(100% - 80rpx);
				position: absolute;
				bottom: 126rpx;
				left: 50%;
				transform: translate(-50%, -20%);
				text-align: center;
				color: #fff;
				padding: 40rpx;

				.agreement {
					display: flex;
					align-items: center;
					justify-content: center;

					.checkbox-wrapper {
						display: flex;
						align-items: center;
						cursor: pointer;
					}

					.custom-checkbox {
						width: 32rpx;
						height: 32rpx;
						border-radius: 50%;
						border: 2rpx solid #ccc;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 16rpx;
						background-color: #fff;
						transition: all 0.3s ease;

						&.checked {
							background-color: rgba(255, 179, 39, 1);
							border-color: rgba(255, 179, 39, 1);
						}
					}

					.protocol {
						color: rgba(255, 179, 39, 1);
					}
				}

				.agreement text {
					font-size: 24rpx;
					color: rgba(120, 120, 130, 1);
				}
			}

			/* 底部按钮固定容器 */
			.footer-btn-wrapper {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				display: flex;
				justify-content: center;
				padding: 20rpx 0 50rpx;
				background: linear-gradient(to bottom,
						rgba(255, 255, 255, 0),
						rgba(255, 255, 255, 1));

				/* 渐变背景 */

				.footer-btn {
					background-color: rgba(255, 179, 39, 1);
					font-weight: 900;
					font-size: 36rpx;
					line-height: 36rpx;
					padding: 30rpx 36rpx;
					text-align: center;
					width: 570rpx;
					border-radius: 40rpx;
					color: rgba(0, 0, 0, 1);
					box-shadow: 0 8rpx 20rpx rgba(255, 179, 39, 0.3);
				}
			}
		}
	}
</style>